<template>
	<div v-if="adStatus" class="poster-first">
		<div class="mask" v-show="adStatus">
			<!-- 关闭按钮 -->
			<div class="icon-box">
				<img @click.stop="posterImageClose" class="icon"
					src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/dx2x.png">
			</div>
			<img class="img" @click.stop="toDetails" :src="url || ''" mode="widthFix" show-menu-by-longpress />
		</div>
	</div>
</template>

<style lang="less" scoped>
	.mask {
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0.3);
		width: 100vw;
		height: 95vh;
		padding-bottom: 5vh;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.icon-box {
			width: 560rpx;
			height: 100rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.icon {
				height: 60rpx;
				width: 60rpx;
			}
		}

		.img {
			width: 600rpx;
			height: 824rpx;
			background: rgba(0, 0, 0, 0);
			border-radius: 16rpx;
		}
	}
</style>

<script>
	// import {
	// 	PosterCanvas
	// } from "@/utils";

	export default {
		name: "adPoster",
		props: {
			adStatus: Boolean,
			posterData: Object
		},
		data: function() {
			return {
				canvasStatus: false,
				posterImage: ""
			};
		},
		// watch: {
		//   posterImageStatus: function() {
		//     var that = this;
		//     if (that.posterImageStatus === true) {
		//       // that.$nextTick(function() {
		//         this.posterImage = this.posterData.ad_poster;
		//         this.canvasStatus = true;
		//       // });
		//     }
		//   }
		// },
		beforeMount: function() {
			this.canvasStatus = false;
			this.$forceUpdate()
		},
		computed: {
			url() {
				return this.posterData.ad_poster;
			}
		},
		mounted: function() {
			console.log(this.posterData)
		},
		methods: {
			// 关闭按钮点击
			posterImageClose: function() {
				this.canvasStatus = false;
				this.$emit("closeAd");
			},
			savePosterPath: function() {
				PosterCanvas(this.posterData, posterImage => {
					this.canvasStatus = true;
					this.posterImage = posterImage;
				});
			},
			//跳转广告详情
			toDetails() {
				if (this.posterData.url) {
					this.posterImageClose()
					wx.navigateTo({
						url: this.posterData.url
					})
				}
			},
			saveImg: function() {
				this.downloadImage(
					this.posterImage,
					"poster"
				);
			},
			downloadImage: function(imgsrc, name) {
				var that = this;
				this.isDown = true;
				var downloadUrl = imgsrc;

				if (!wx.saveImageToPhotosAlbum) {
					wx.showModal({
						title: "提示",
						content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。"
					});
					that.openDialogVisible = true;

					return;
				}

				// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
				wx.getSetting({
					success(res) {
						if (!res.authSetting["scope.writePhotosAlbum"]) {
							that.openDialogVisible = true;

							// 接口调用询问
							wx.authorize({
								scope: "scope.writePhotosAlbum",
								success() {
									that.saveShareImage(downloadUrl);
								},
								fail() {
									// 用户拒绝了授权
									// 打开设置页面
									wx.openSetting({
										success: function(data) {},
										fail: function(data) {}
									});
								}
							});
						} else {
							that.saveShareImage(downloadUrl);
						}
					},
					fail(res) {
						that.openDialogVisible = true;
					}
				});
			},
			saveShareImage(imageUrl) {
				wx.downloadFile({
					url: imageUrl, //仅为示例，并非真实的资源
					success: function(res) {
						if (res.statusCode === 200) {
							wx.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(res) {
									wx.showToast({
										title: '保存成功！',
										duration: 1500
									})
								},
								fail: function(res) {
									wx.showToast({
										title: "保存失败",
										icon: 'none',
									})
								},
								complete: function(res) {}
							})
						} else {
							console.log(res)
						}
					},
					fail: function(res) {
						console.log(res)
						wx.hideToast()
					},
					complete: function() {}
				})
			},
		}
	};
</script>